<template>
    <div class="merchantsList">
        <div class="top">
            <div class="time pad">
                <span class="label">商户查询：</span>
                <el-input placeholder="请输入商户编号、商户账号名称、店铺名称" v-model="filter.query" style="width: 300px;">
                </el-input>
            </div>
            <div class="time pad">
                <span class="label">邀请人：</span>
                <el-select v-model="filter.referrer" filterable placeholder="请选择">
                    <el-option v-for="item in referrerList" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="time pad">
                <el-select v-model="filter.type" placeholder="请选择">
                    <el-option v-for="item in typeList" :key="item.id" :label="item.value" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="time pad">
                <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="btn pad">
                <el-button @click="setReset">重置</el-button>
                <el-button type="primary" @click="search">查询</el-button>
            </div>
        </div>
        <div class="main">
            <div class="main_top">
                <div class="lef">
                    <div class="" v-for="item in statusType" :class="['list', currentNavtab == item.id ? 'active' : '']"
                        :key="item.id" :value="item.id" @click="handleTab(item.id)">
                        {{ item.value }} <span>({{ item.num }})</span>
                    </div>
                </div>
                <!-- <el-button type="primary" icon="el-icon-upload">导出</el-button> -->
                <div>
                    <export-excel-button title="合同审批列表" action="/merchant/contract/export" :params="ExportParams" />
                </div>
            </div>
            <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
                @pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
                <template v-slot:status="{ scope }">
                    <dict-tag :options="statuslist" :value="scope.row.status" />
                </template>
                <template v-slot:operate="{ scope }">
                    <el-button size="small" v-if="scope.row.status==1" @click="uploadView(scope.row)">上传</el-button>
                    <el-button size="small" v-if="scope.row.status==2" @click="modifyView(scope.row)">修改</el-button>
                    <el-button size="small" v-if="scope.row.status==2" type="warning" @click="getAudit(scope.row)">审批</el-button>
                    <el-button size="small" v-if="scope.row.status==3" type="primary" @click="watchView(scope.row)">查看</el-button>
                    <el-button size="small" v-if="scope.row.status==4" type="danger" @click="reuploadView(scope.row)">重新上传</el-button>
                </template>
            </ex-table>
        </div>
        <!-- 弹窗 -->
        <Dialog ref="dialogRef" @success="_handleSuccess"></Dialog>
    </div>
</template>
<script>
import {
    mapState
} from "vuex";
// components
// import Loading from '@/components/Loading/index'
import Dialog from "./components/dialog";
// api
import {
    contractList,referrerSelect,contractStatistics
} from "@/api/merchants/contractReview";
import ExportExcelButton from "@/components/ExportExcelButton/index";
// mixins
import handlePageMixin from "@/mixins/handlePageMixin";

export default {
    name: "contractReview",
    components: {
        ExportExcelButton,
        Dialog
    },
    mixins: [handlePageMixin],
    computed: {
        ExportParams() {
            const params = {
                ...this.pageOptions,
                ...this.filter,
            };
            return params;
        },
    },
    data() {
        return {
            visibleDialog: false,
            date: [],
            loading: false,
            referrerList: [],//邀请人下拉
            filter: {
                endTime: "",//结束时间 yyyy-MM-dd
                query: "",//商户查询
                referrer: "",//邀请人
                startTime: "",//开始时间 yyyy-MM-dd
                type: "1",//1 申请时间 2入驻时间 3合同上传时间 4合同审批时间
                status: "2",//状态 1 待上传 2 待审核 3 已通过 4 已拒绝
            },
            typeList: [ //时间类型
                {
                    id: "1",
                    value: "申请时间",
                },
                {
                    id: "2",
                    value: "入驻时间",
                },
                {
                    id: "3",
                    value: "合同上传时间",
                },
                {
                    id: "4",
                    value: "合同审批时间",
                },
            ],
            currentNavtab: 2,
            statusType: [
                {
                    id: 2,
                    value: "待审核",
                    num: 0
                },
                {
                    id: 1,
                    value: "待上传",
                    num: 0
                },
                {
                    id: 4,
                    value: "已拒绝",
                    num: 0
                },
                {
                    id: 3,
                    value: "已通过",
                    num: 0
                },
            ],
            statuslist: [],//状态字典
            sourceList: [],
            applyFunctionList: [],
            tableColumn: [{
                prop: "merchantId",
                label: "商户编号",
                width: "120"
            },
            {
                prop: "merchantName",
                label: "商户账号名称",
                width: "140"
            },
            {
                prop: "shopName",
                label: "店铺名称",
            },
            {
                prop: "referrer",
                label: "邀请人",
            },
            {
                prop: "applyTime",
                label: "申请时间",
                width: "100"
            },
            {
                prop: "applySuccessTime",
                label: "入驻时间",
                width: "100"
            },
            {
                prop: "uploadTime",
                label: "合同上传时间",
                width: "100"
            },
            {
                prop: "auditTime",
                label: "合同审批时间",
                width: "100"
            },
            {
                prop: "auditName",
                label: "审批人",
            },
            {
                slot: true,
                slotName: "status",
                label: "状态",

            },
            {
                label: "操作",
                slot: true,
                slotName: "operate",
                width: "150",
                fixed: "right",
            },
            ],
            tableData: [],
            isShow: true,
            id: "",
            pathType: 'add',
        };
    },

    created() {
        this.getReferrer()
        this.getDict()
        this.getList();
        this.getNum();
        
    },
    methods: {
        //获取邀请人下拉
        getReferrer() {
            var params = {}
            referrerSelect(params).then(res => {
                this.referrerList = res.result
            })
        },
        //获取字典
        getDict() {
            var dictType = "merchant_contract_status";
            this.$getSelectList(dictType)
                .then((res) => {
                    this.statuslist = res.result[0].dictList;
                })
                .finally(() => {
                });
        },
        //上传
        uploadView(row){
            this.$refs.dialogRef.open(row.id,'upload',row.shopName);
        },
        //修改
        modifyView(row){
            this.$refs.dialogRef.open(row.id,'modify',row.shopName);
        },
        //重新上传
        reuploadView(row){
            this.$refs.dialogRef.open(row.id,'reupload',row.shopName);
        },
        //审核
        getAudit(row) {
            this.$refs.dialogRef.open(row.id,'examine',row.shopName);
        },
        //查看
        watchView(row){
            this.$refs.dialogRef.open(row.id,'watch',row.shopName);
        },
        select(value) {
            console.log("select", value);
        },
        //切换选项
        handleTab(id) {
            console.log("id", id)
            this.currentNavtab = id
            this.filter.status = id
            this.pageOptions.pageNum = 1
            this.getList();
        },
        //列表
        getList() {
            this.loading = true;
            const params = {
                ...this.pageOptions,
                ...this.filter,
            };
            contractList(params)
                .then((res) => {
                    const {
                        total,
                        records
                    } = res.result;
                    this.$refs.table.pageOptions.total = total;
                    this.tableData = records;
                    this.loading = false;
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //查询审核条数
        getNum() {
            this.loading = true;
            var params = {
                ...this.filter
            }
            delete params.status
            contractStatistics(params)
                .then((res) => {
                    this.statusType[0].num = res.result.waitAudit; //待审核
                    this.statusType[1].num = res.result.waitUpload; //待上传
                    this.statusType[2].num = res.result.refuse; //已拒绝
                    this.statusType[3].num = res.result.pass; //已通过
                })
                .catch(() => {
                    
                });
        },
        _handleSuccess() {
            this.getList();
            this.getNum();
        },
        //重置
        setReset() {
            this.date = []
            this.filter.endTime = '';
            this.filter.query = "";
            this.filter.referrer = "";
            this.filter.startTime = "";
            this.currentNavtab = 2
            this.filter.status = '2'
            this.filter.type = '1'
            this.pageOptions.pageNum = 1;
            this.$refs.table.pageOptions.pageNum = 1;
            this.getList();
            this.getNum()
        },
        //搜索
        search() {
            this.filter.startTime = this.date[0];
            this.filter.endTime = this.date[1];
            this.pageOptions.pageNum = 1;
            this.$refs.table.pageOptions.pageNum = 1;
            this.getList();
            this.getNum()
        },
        _handleInviterSuccess() {
            this.getList();
        },
    },
};

</script>
<style lang="scss" scoped>
@import "../style/merchantsList";

.first_box {
    ::v-deep :nth-child(1).el-input__inner {
        width: 100px;
    }

    ::v-deep :nth-child(2).el-input__inner {
        width: 200px;
    }
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.el-input {
    display: inline-block;
    position: relative;
    width: 260px;
}

.zhezao {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #333;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    color: #1890ff;
    ;
}
</style>
  